<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>docker管理台</title>
    <!--<link rel="icon" href="/static/images/logo.png">-->
    <link rel="stylesheet" href="/static/style/login.css">
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {

            // 更新登录界面位置 -top
            function loginWidgetPos() {
                var loginW = $(".c_div_login");
                $('.c_div_login').css({
                    position: 'absolute',
                    left: ($(window).width() - $('.c_div_login').outerWidth()) / 2,
                    top: ($(window).height() - $('.c_div_login').outerHeight()) / 2 - 30
                });
            }

            loginWidgetPos();
            setInterval(loginWidgetPos, 1);
            // 更新登录界面位置 -end

            var input_list = [$("#id_input_username"), $("#id_input_password")];
            for (var i = 0; i < input_list.length; i++) {
                input_list[i].on('input', function () {
                    if (!($('#id_input_username').val() == '')) {
                        $("#id_login_retu_message").html("");
                    }
                });
            }

            function loginFunc() {
                var username = $("#id_input_username");
                var password = $("#id_input_password");
                if (username.val() == "" || password.val() == "") {
                    $("#id_login_retu_message").html("用户名或密码不能为空");
                    return;
                }

                $.ajax({
                    url: '/login',
                    type: 'POST',
                    dataType: 'json',
                    data: $("#login_form").serialize(),
                    success: function (data) {
                        var obj = data;
                        if (!obj.status) {
                            $("#id_login_retu_message").html(obj.error);

                            function errorFunc() {
                                $("#id_login_retu_message").html("");
                            }

                            window.setTimeout(errorFunc, 6000);
                        } else {
                            document.location = 'home';
                        }
                    }
                });
            }

            $("#id_button_login").click(function () {
                loginFunc();
            });

            $(document).keypress(function (e) {
                var eCode = e.keyCode;
                if (eCode == 13) {
                    loginFunc();
                }
            })
        });

    </script>
</head>
<body class="c_body">
<div class="c_div_login">
    <img class="c_login_img" style="display:none" src="/static/images/logo.png" alt="">
    <label class="c_login_showname">docker管理台</label>
    <form id="login_form" action="">
        <input name="username" id="id_input_username" class="c_input_username" type="text" placeholder="请输入用户名">
        <input name="password" id="id_input_password" class="c_input_password" type="password" placeholder="请输入密码">
    </form>
    <label id="id_login_retu_message" class="c_login_retu_message"></label>
    <button id="id_button_login" type="submit" class="c_button_login">登录</button>
</div>
</body>
</html>